<script lang="ts" setup>
// import { ref } from 'vue';
// import { useRouter } from 'vue-router';

import { Page, VbenAvatar } from '@vben/common-ui';
import { preferences } from '@vben/preferences';
import { useUserStore } from '@vben/stores';

// import { openWindow } from '@vben/utils';
// import Arranging from '#/views/course/arranging/index.vue';

// import { openWindow } from '@vben/utils';
// import { Calendar, Card, Carousel, Col, Row } from 'ant-design-vue';
// import { Dayjs } from 'dayjs';

// import img1 from '#/assets/images/b1.bmp';
// import img2 from '#/assets/images/b2.bmp';

const userStore = useUserStore();

// const router = useRouter();

// const banners = [
//   {
//     img: img1,
//     title: '欢迎使用智慧实验室管理平台',
//   },
//   {
//     img: img2,
//     title: '欢迎使用智慧实验室管理平台',
//   },
// ];

// const nowDate = ref<Dayjs>();
// const onPanelChange = (value: Dayjs, mode: string) => {
//   console.log(value, mode);
// };

// 这是一个示例方法，实际项目中需要根据实际情况进行调整
// This is a sample method, adjust according to the actual project requirements
// function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
//   if (nav.url?.startsWith('http')) {
//     openWindow(nav.url);
//     return;
//   }
//   if (nav.url?.startsWith('/')) {
//     router.push(nav.url).catch((error) => {
//       console.error('Navigation failed:', error);
//     });
//   } else {
//     console.warn(`Unknown URL for navigation item: ${nav.title} -> ${nav.url}`);
//   }
// }
</script>

<template>
  <Page :auto-content-height="true">
    <div class="px-3">
      <div class="card-box p-4 py-6 lg:flex">
        <VbenAvatar
          :src="userStore.userInfo?.avatar || preferences.app.defaultAvatar"
          class="size-20"
        />
        <div class="flex flex-col justify-center md:ml-6 md:mt-0">
          <h1 class="text-md font-semibold md:text-xl">
            {{ userStore.userInfo?.realName }} 您好, 开始您一天的工作吧！
          </h1>
          <span class="text-foreground/80 mt-1">
            登录于 {{ userStore.userInfo?.loginDate }}
          </span>
        </div>
      </div>
    </div>

    <!-- <Arranging /> -->
  </Page>
</template>

<style lang="less" scoped>
.image-container {
  width: 100%; /* 或具体宽度 */
  height: 200px; /* 或具体高度 */
  overflow: hidden; /* 防止内容溢出 */
}

.ant-carousel .slick-slide {
  text-align: center; /* 对齐方式 */
}

.ant-carousel .slick-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持比例并覆盖整个容器 */
}

.ant-carousel .slick-slide .title {
  position: absolute; /* 绝对定位 */
  bottom: 0; /* 距离底部 */
  width: 100%; /* 全宽 */
  padding: 5px 15px;
  overflow: hidden; /* 隐藏溢出的内容 */
  line-height: 30px;
  color: #fff; /* 文字颜色 */
  text-align: left; /* 居中对齐 */
  text-overflow: ellipsis; /* 显示省略号来代表被修剪的文本 */
  white-space: nowrap; /* 防止文本换行 */
  background: rgb(0 0 0 / 50%); /* 背景颜色 */
}
</style>
